import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, message, Table } from 'antd';
import PropTypes from 'prop-types';

const mapStateToProps = (state: any) => ({
  HandsetMng: state.HandsetMng,
});
class DeleteAssociationModal extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  handleSubmit = () => {
    const { dispatch, formData, freshPage, closeModal } = this.props;
    const postData = {
      vin: formData.vin,
      driverSid: formData.sid,
    };
    dispatch({
      type: 'DriverMng/postObj',
      payload: {
        url: '/msalcohollock/driver/unbind/vehicle',
        ...postData,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          message.success('删除关联成功')
          closeModal();
          freshPage();
        }else{
          message.warning(`删除关联失败, ${res.statusMessage}`)
        }
      },
    }).finally(() =>
      this.setState({
        loading: false,
      }),
    );
  };

  close = () => {
    const { closeModal } = this.props;
    closeModal();
  };
  render() {
    const { formData, modalVisible } = this.props;
    const { loading } = this.state;
    const data = [{ ...formData }];
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>
          取消
        </Button>
        <Button size="small" loading={loading} onClick={this.handleSubmit} type="primary">
          确定
        </Button>
      </div>
    );
    const columns = [
      {
        title: '司机手机号',
        dataIndex: 'phoneNumber',
        key: 'phoneNumber',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '司机关联车辆VIN',
        dataIndex: 'vin',
        key: 'vin',
      },
      {
        title: '车牌号',
        dataIndex: 'lisencePlate',
        key: 'lisencePlate',
      },
    ];
    return (
      <Modal
        title={'删除关联'}
        footer={footer}
        visible={modalVisible}
        width={700}
        onCancel={this.close}
      >
        <h3>
          确定要删除司机{formData.name}（司机的名字）与车辆{formData.vin}的关联关系吗？
        </h3>
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered={true}
          style={{ marginTop: '20px' }}
        />
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(DeleteAssociationModal);
